<template>
	<view class="container">
		<navbar :title="navTitle"></navbar>
		<view class="return-info bg-box">
			<view class="title">
				退款商品
			</view>
			<view class="goods">
				<image :src="$img_base_url(goods.image)" mode="aspectFill"></image>
				<view class="g-info">
					<view class="name">
						<view class="text">
							{{goods.title}}
						</view>
						<view class="price">
							¥ <text>{{gPrice(goods.price)[0]}}</text>{{gPrice(goods.price)[1]}}
						</view>
					</view>
					<view class="spec">
						<view class="text">
							{{goods.difference}}
						</view>
						<view class="num">
							x 1
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="r-info bg-box">
			<view class="title">
				退款信息
			</view>
			<view class="f-box">
				<view class="f-item">
					<view class="label">
						<text>货物状态</text>
					</view>
					<view class="content" @click="expressClick">
						<text>{{expressType==1 ? '已收到货' : '未收到货/已拒收'}}</text>
						<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="f-item" @click="reasonClick">
					<view class="label">
						<text>退款原因</text>
					</view>
					<view class="content">
						<text>{{reason}}</text>
						<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
					</view>
				</view>
				
				<!-- <view class="f-item" v-if="expressType==1">
					<view class="label">
						<text>退款件数 </text>
					</view>
					<view class="content r-num">
						<image @click="numToast" :src="$img_path('/mall/13.png')" mode="widthFix"></image>
						<input type="number" v-model="return_num" />
						<image @click="numToast" :src="$img_path('/mall/12.png')" mode="widthFix"></image>
					</view>
				</view> -->
			</view>
		</view>
		
		<!-- <view class="j-address bg-box" v-if="type!=1">
			<text>我的寄件地址</text>
			<view class="j-r-info">
				<view class="a">
					<view class="c-i">
						详细地址详细地址详细地址
					</view>
					<view class="user">
						张三 123****8910 XXX省XXX市XX区
					</view>
				</view>
				<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="j-address bg-box" v-if="type==3">
			<text>我的收货地址</text>
			<view class="j-r-info">
				<view class="a">
					<view class="c-i">
						{{orderData.address.address.split('/')[3]}}
					</view>
					<view class="user">
						{{orderData.address.name}} {{orderData.address.mobile}} {{orderData.address.address.split('/').slice(0,3).join('')}}
					</view>
				</view>
				<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view> -->
		
		<view class="r-price bg-box" v-if="type!=3">
			<view class="top">
				<text>申请退款金额</text>
				<view class="price">
					<text>￥</text>
					<input type="number" v-model="price" :maxlength="Number(orderData.pay.actual_payment)" />
					<image :src="$img_path('/pagesMine/36.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="text">
				最多可输入服务金额¥ {{orderData.pay.actual_payment}}
			</view>
		</view>
		<view class="w-text">
			售后完成后，以下资产预计将被退回
		</view>
		
		<!-- <view class="r-coupon bg-box">
			<text>退优惠劵</text>
			<view class="r-text" @click="$refs.r_coupon.open()">
				<text>1张</text>
				<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view> -->
		
		<view class="u-pz bg-box">
			<view class="form-item column">
				<view class="label">
					<text>上传凭证</text>
					<text>选填</text>
				</view>
				<view class="form-content">
					<view class="upload">
						<view class="u-box" v-for="(item,i) in images" :key="i">
							<image class="del-icon" @click="$delete(images,i)" :src="$img_path('/course/city_1.png')" mode="widthFix"></image>
							<image class="z-img" :src="$img_base_url(item)" mode="aspectFill"></image>
						</view>
						<view class="u-box" @click="upload">
							<image class="u-icon" :src="$img_path('/pagesMine/37.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="u-pz bg-box" style="margin-bottom:  20rpx;">
			<view class="form-item column">
				<view class="label">
					<text>补充描述</text>
					<text>选填</text>
				</view>
				<view class="form-content">
					<view class="textarae-box">
						<textarea maxlength="200" placeholder-class="p-inp" v-model="refund_content" placeholder="请输入取消的原因"></textarea>
						<text>0/200</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<button @click="submitForm">提交</button>
		</view>
		
		<popupBox ref="goodsStatus" :isSlot="true" type="bottom">
			<view class="status-box">
				<view class="title">
					<text>货物状态</text>
					<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
				</view>
				<view class="con">
					<view class="item-check" @click="selectExpress(1)">
						<text>已收到货</text>
						<view class="r-img">
							<image v-if="expressType==1" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
					<view class="item-check" @click="selectExpress(2)">
						<text>未收到货/已拒收</text>
						<view class="r-img">
							<image v-if="expressType==0" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</popupBox>
		
		<popupBox ref="return_info" :isSlot="true" type="bottom">
			<view class="status-box return-box">
				<view class="title">
					<text>退货原因</text>
					<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
				</view>
				<view class="con">
					<view class="item-check" v-for="(item,i) in return_text" :key="i" @click="selectReason(item)">
						<text>{{item.text}}</text>
						<view class="r-img">
							<image v-if="n_reason==item.text" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="return-btn">
					<button @click="confirmReason">确定</button>
				</view>
			</view>
		</popupBox>
		
		<popupBox ref="toast" :isSlot="true">
			<view class="toast-text">
				当前商品最多退X件/最少退1件哦
			</view>
		</popupBox>
		
		<popupBox ref="r_coupon" :isSlot="true" type="bottom">
			<view class="coupon-box">
				<view class="title">
					<text>优惠券退货明细</text>
					<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
				</view>
				<view class="tip">
					售后完成后，你可以去我的-我的优惠券查看
				</view>
				<view class="c-list">
					<view class="c-item" v-for="item in 2">
						<view class="info">
							<view class="left">
								<view class="name">
									优惠券名称
								</view>
								<view class="time">
									有效期至2024-06-10
								</view>
							</view>
							<view class="right">
								<view class="price">
									<text>￥</text>20
								</view>
								<view class="m-t">
									满50元可用
								</view>
							</view>
						</view>
						<view class="coupon-btn">
							<view class="left">
								<text>全场通用</text>
								<image :src="$img_path('/pagesMine/38.png')" mode="widthFix"></image>
							</view>
							<view class="right">
								<button>已使用</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</popupBox>
		
		<!-- 提交提示 -->
		<popupBox ref="submitToast" :isSlot="true">
			<view class="sub-box">
				<view class="title">
					提交售后申请成功
				</view>
				<view class="c-text">
					请耐心等待商家的审核
				</view>
				<view class="sub-btn">
					<button @click="confirm">好的</button>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	const FormData = require('@/utils/formdata/index.js')
	import { 
		goodsOrderInfo,
		groupsGetOrderInfo,
		addApply
	} from '@/utils/api/mallApi.js'
	import { upload } from '@/utils/api/public.js'
	import popupBox from '../../../components/popup/popup.vue';
	export default {
		components:{
			popupBox
		},
		data() {
			return {
				navTitle:'申请退款',
				
				return_text:[
					{
						text:'不喜欢',
						id:1
					},
					{
						text:'空包裹',
						id:2
					},
					{
						text:'一直未送达',
						id:3
					},
					{
						text:'颜色/尺码不符',
						id:4
					},
					{
						text:'质量问题',
						id:5
					},
					{
						text:'少件漏发',
						id:6
					},
					{
						text:'假冒品牌',
						id:7
					},
				],
				type:1,//售后类型
				order_id:null,
				order_type:null,
				orderData:null,
				goods:null,
				price:'0',
				
				expressType:0,//是否到货
				return_num:1,//数量
				reason:'',//原因
				n_reason:'',
				images:[],//申请图片
				refund_content:'',//补充说明
			};
		},
		onLoad(options) {
			this.type = options.type
			if(options.type==1){
				this.navTitle = '申请退款'
			}else if(options.type==2){
				this.navTitle = '申请退货退款'
			}else{
				this.navTitle = '申请换货'
			}
			this.goods = JSON.parse(options.goods)
			this.order_type = options.order_type
			this.order_id = options.order_id
			if(options.order_type==1){
				this.getOrderInfo()
			}else{
				this.groupsOrderInfo()
			}
		},
		methods:{
			// 普通订单
			getOrderInfo(){
				let formData = new FormData()
				formData.append('id',this.order_id)
				uni.showLoading()
				// goodsOrderInfo(formData.getData()).then(res=>{
				goodsOrderInfo({id:this.order_id}).then(res=>{
					uni.hideLoading()
					// console.log(res,'--')
					// this.order_status = res.data.state
					this.orderData = res.data
					this.price = res.data.pay.actual_payment
					if(res.data.state==1){
						this.dateFormat(res)
					}
				})
			},
			
			// 拼团订单
			groupsOrderInfo(){
				let formData = new FormData()
				formData.append('id',this.order_id)
				groupsGetOrderInfo(formData.getData()).then(res=>{
					uni.hideLoading()
					// console.log(res,'--')
					// this.order_status = res.data.state
					this.orderData = res.data
					if(res.data.state==1){
						this.dateFormat(res)
					}
				})
			},
			expressClick(){
				this.$refs.goodsStatus.open()
			},
			reasonClick(){
				this.$refs.return_info.open()
				this.n_reason = this.reason
			},
			selectReason(data){
				this.n_reason = data.text
			},
			confirmReason(){
				this.reason = this.n_reason;
				this.$refs.return_info.close()
			},
			selectExpress(i){
				this.expressType=i
			},
			
			
			// 上传
			upload(){
				if(this.length>=4){
					uni.showToast({
						title:'最多上传4张',
						icon:'none'
					})
					return
				}
				uni.chooseImage({
					count:1,
					success: (res) => {
						let file = res.tempFilePaths[0]
						upload({file}).then(res=>{
							this.images.push(res.data.url)
						})
					}
				})
			},
			
			numToast(){
				this.$refs.toast.open()
				setTimeout(()=>{
					this.$refs.toast.close()
				},1000)
			},
			submitForm(){
				let obj = {
					expressType:this.expressType,
					goods:this.goods.id,
					images:this.images.join(','),
					money:this.price,
					order_id:this.orderData.id,
					order_type:this.order_type==1?'goods':'groups',
					refund_content:this.refund_content,
					reason:this.reason,
					type:this.type==1?'0':this.type==2?'1':'2',
					mobile:this.orderData.address.mobile
				}
				uni.showLoading()
				addApply(obj).then(res=>{
					uni.hideLoading()
					if(res.code==1){
						this.$refs.submitToast.open()
					}
				})
			},
			confirm(){
				this.$refs.submitToast.close()
				uni.navigateBack({
					delta:3
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'submit_form.scss'
</style>
